<!--
 * @Description: 
 * @Autor: 商晓彬
 * @Date: 2021-08-24 10:14:40
 * @LastEditors: 商晓彬
 * @LastEditTime: 2021-11-26 16:39:10
-->
<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="add modal fade" tabindex="-1" role="dialog"
    aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{backdrop: 'static', keyboard: !saving}">
    <div style="width:1244px!important;margin: 1.75rem auto;">
        <div class="modal-content">
            <form *ngIf="active" #bopForm="ngForm" novalidate (ngSubmit)="save()" autocomplete="off">
                <div class="modal-header">
                    <h4 class="modal-title">
                        <span>{{title}}</span>
                    </h4>
                    <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')"
                        [disabled]="saving">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body" style="height: 630px!important; width: 100%;">
                    <div class="p-formgroup-inline flex">
                        <div class="flex ">
                            <label style="margin-top: 5px;">*合格证号：</label>
                            <input style=" width:150px;height: 35px;" name="qualifiedNumbers" type="text"
                                [(ngModel)]="qualifiedNumber" />
                        </div>
                        <button pButton type="button" label="新增" (click)="search()"
                            style="margin-left: 1.5rem"></button>
                    </div>
                    <div class="p-formgroup-inline">
                        <div class="row align-items-center" style="margin-top: 25px;">
                            <div class="primeng-datatable-container">
                                <p-table [value]="inputs" [lazy]="true" [scrollable]="true" ScrollWidth="100%">
                                    <ng-template pTemplate="header">
                                        <tr>
                                            <th style="width: 80px">操作</th>
                                            <th style="width: 50px">序号</th>
                                            <th style="width: 150px">产品图号</th>
                                            <th style="width: 150px">产品名称</th>
                                            <th style="width: 170px">*规格</th>
                                            <th style="width: 170px">*物料类别</th>
                                            <th style="width: 170px">*物料细类</th>
                                            <th style="width: 170px">物料属性</th>
                                            <th style="width: 200px">合格证号</th>
                                            <th style="width: 170px">*型号(产品代号)</th>
                                            <th style="width: 170px">发次</th>
                                            <th style="width: 170px">批次</th>
                                            <th style="width: 200px">合格证任务号</th>
                                            <th style="width: 200px">可用数量</th>
                                            <th style="width: 200px">单位</th>
                                            <th style="width: 300px">可用产品编号(件号)</th>
                                            <th style="width: 350px">有效期止</th>
                                            <th style="width: 300px">特殊记载</th>
                                        </tr>
                                    </ng-template>
                                    <ng-template pTemplate="body" let-record="$implicit" let-rowIndex="rowIndex">
                                        <tr>
                                            <td style="width: 80px">
                                                <button pButton type="button" label="删除"
                                                    (click)="tableDel(rowIndex)"></button>
                                            </td>
                                            <td style="width: 50px">{{rowIndex+1}}</td>

                                            <td style="width: 150px">{{record.productDrawingNo}}</td>
                                            <td style="width: 150px">{{record.productName}}</td>
                                            <td style="width: 170px">
                                                <input #moduleInput="ngModel"
                                                    style=" width:150px;height: 35px;margin-right: 10px;" name="{{rowIndex+'module'}}"
                                                    type="text" [(ngModel)]="record.module" required />
                                                <validation-messages [formCtrl]="moduleInput"></validation-messages>
                                            </td>
                                            <td style="width: 170px">
                                                <p-dropdown filter="true" name="{{rowIndex+'materialsNodeId'}}"
                                                    [options]="materialsNodeOptions"
                                                    (onChange)="onChange($event,record)" placeholder="请选择物料类别"
                                                    [(ngModel)]="record.materialsNodeId"
                                                    #materialsNodeIdSelect="ngModel" emptyFilterMessage="暂无数据" required>
                                                    <ng-template let-item pTemplate="selectedItem">
                                                        <span
                                                            style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                                    </ng-template>
                                                    <ng-template let-model pTemplate="item">
                                                        <div class="ui-helper-clearfix"
                                                            style="position: relative;height: 25px;">
                                                            <div
                                                                style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                                                {{model.label}}
                                                            </div>
                                                        </div>
                                                    </ng-template>
                                                </p-dropdown>
                                                <validation-messages [formCtrl]="materialsNodeIdSelect">
                                                </validation-messages>

                                            </td>
                                            <td style="width: 170px">
                                                <p-dropdown filter="true" name="{{rowIndex+'materialCategoryId'}}"
                                                    [options]="record.materialCategoryOptions"
                                                    #materialCategoryIdSelect="ngModel" placeholder="请选择物料细分"
                                                    [(ngModel)]="record.materialCategoryId" emptyFilterMessage="暂无数据"
                                                    required>
                                                    <ng-template let-item pTemplate="selectedItem">
                                                        <span
                                                            style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                                    </ng-template>
                                                    <ng-template let-model pTemplate="item">
                                                        <div class="ui-helper-clearfix"
                                                            style="position: relative;height: 25px;">
                                                            <div
                                                                style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                                                {{model.label}}
                                                            </div>
                                                        </div>
                                                    </ng-template>
                                                </p-dropdown>
                                                <validation-messages [formCtrl]="materialCategoryIdSelect">
                                                </validation-messages>

                                            </td>
                                            <td style="width: 170px">
                                                <p-dropdown required filter="true" #materialsPropertySelect="ngModel"
                                                    name="{{rowIndex+'materialsProperty'}}"
                                                    [options]="materialsPropertyOptions" placeholder="请选择物料属性"
                                                    [(ngModel)]="record.materialsProperty" emptyFilterMessage="暂无数据">
                                                    <ng-template let-item pTemplate="selectedItem">
                                                        <span
                                                            style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                                    </ng-template>
                                                    <ng-template let-model pTemplate="item">
                                                        <div class="ui-helper-clearfix"
                                                            style="position: relative;height: 25px;">
                                                            <div
                                                                style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                                                {{model.label}}
                                                            </div>
                                                        </div>
                                                    </ng-template>
                                                </p-dropdown>
                                                <validation-messages [formCtrl]="materialsPropertySelect">
                                                </validation-messages>

                                            </td>
                                            <td style="width: 200px">
                                                <input style=" width:150px;height: 35px;"
                                                    name="{{rowIndex+'qualifiedNumber'}}" pInputText type="text"
                                                    [(ngModel)]="record.qualifiedNumber">
                                            </td>
                                            <td style="width: 170px">
                                                <p-multiSelect required [panelStyle]="{width:'150px'}"
                                                    [options]="modelOptions" id="model" dataKey="value"
                                                    optionLabel="label" defaultLabel="请选择" filter="true"
                                                    name="{{rowIndex+'models'}}" #modelsSelect="ngModel"
                                                    [(ngModel)]="record.models"  [itemSize]="34" (onChange)="getSendTime($event,record)">
                                                </p-multiSelect>
                                                <validation-messages [formCtrl]="modelsSelect"></validation-messages>

                                            </td>
                                            <td style="width: 170px">
                                                <p-multiSelect required [panelStyle]="{width:'150px'}"
                                                    [options]="record.sendTimeOptions" #sendTimesSelect="ngModel"
                                                    id="sendTimes" dataKey="value" optionLabel="label" filter="true"
                                                    name="{{rowIndex+'sendTimes'}}" [(ngModel)]="record.sendTimes"
                                                    defaultLabel="请选择"  [itemSize]="34">
                                                </p-multiSelect>
                                                <validation-messages [formCtrl]="sendTimesSelect"></validation-messages>

                                            </td>
                                            <td style="width: 170px">
                                                <input style=" width:150px;height: 35px;" name="{{rowIndex+'batch'}}"
                                                    pInputText type="text" [(ngModel)]="record.batch">
                                            </td>
                                            <td style="width: 200px">{{record.qualifiedTaskNumber}} </td>
                                            <td style="width: 200px">
                                                <input style=" width:150px;height: 35px;margin-right: 10px;"
                                                    name="{{rowIndex+'quantity'}}" type="number"
                                                    [(ngModel)]="record.quantity" />
                                            </td>

                                            <td style="width: 200px">
                                                <p-dropdown required #unitSelect="ngModel" filter="true"
                                                    name="{{rowIndex+'unitId'}}" #unitIdSelect="ngModel"
                                                    [options]="unitOptions" placeholder="请选择单位"
                                                    [(ngModel)]="record.unitId" emptyFilterMessage="暂无数据">
                                                    <ng-template let-item pTemplate="selectedItem">
                                                        <span
                                                            style="vertical-align:middle; margin-left: .5em;width: 147px;">{{item.label}}</span>
                                                    </ng-template>
                                                    <ng-template let-model pTemplate="item">
                                                        <div class="ui-helper-clearfix"
                                                            style="position: relative;height: 25px;">
                                                            <div
                                                                style="font-size:14px;float:right;margin-top:4px;width: 147px;">
                                                                {{model.label}}
                                                            </div>
                                                        </div>
                                                    </ng-template>
                                                </p-dropdown>
                                                <validation-messages [formCtrl]="unitIdSelect">
                                                </validation-messages>
                                            </td>
                                            <td style="width: 300px">
                                                <input (blur)="getQuantity(record,rowIndex)"
                                                    style=" width:280px;height: 35px;"
                                                    name="{{rowIndex+'productNumber'}}" pInputText type="text"
                                                    [(ngModel)]="record.productNumber">
                                            </td>
                                            <td style="width: 350px">
                                                <p-calendar name="{{rowIndex+'expirationDate'}}" [locale]="chinese"
                                                    [(ngModel)]="record.expirationDate" [showIcon]="true"
                                                    dateFormat="yy-mm-dd">
                                                </p-calendar>
                                            </td>
                                            <td style="width: 300px">
                                                <input style=" width:290px;height: 35px;"
                                                    name="{{rowIndex+'specialRecords'}}" pInputText type="text"
                                                    [(ngModel)]="record.specialRecords">
                                            </td>
                                        </tr>
                                    </ng-template>
                                </p-table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer" style="justify-content: center;">
                    <button pButton type="button" label="取消" (click)="close()" style="margin-left: 0.5rem"></button>
                    <button pButton [disabled]="!bopForm.form.valid" type="button" label="入库" (click)="save()"
                        style="margin-left: 0.5rem"></button>
                </div>
            </form>
        </div>
    </div>
</div>